<template>
  <div class="main-layout">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-left">
        <div class="logo">
          <el-icon size="24" color="#409eff">
            <OfficeBuilding />
          </el-icon>
          <span class="logo-text">校园社团管理系统</span>
        </div>
      </div>
      
      <div class="header-right">
        <!-- 全局通知中心 -->
        <NotificationList />
        
        <!-- 用户头像下拉菜单 -->
        <ProfileDropdown />
      </div>
    </header>

    <div class="main-container">
      <!-- 左侧菜单 -->
      <aside class="sidebar" :class="{ 'collapsed': isCollapsed }">
        <div class="sidebar-header">
          <el-button
            :icon="isCollapsed ? Expand : Fold"
            circle
            size="small"
            @click="toggleSidebar"
            class="collapse-btn"
          />
        </div>
        
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapsed"
          :unique-opened="true"
          router
          class="sidebar-menu"
        >
          <template v-for="menu in menuList" :key="menu.path">
            <el-menu-item
              v-if="!menu.children || menu.children.length === 0"
              :index="menu.path"
            >
              <el-icon>
                <component :is="menu.icon" />
              </el-icon>
              <template #title>{{ menu.name }}</template>
            </el-menu-item>
            
            <el-sub-menu
              v-else
              :index="menu.path"
            >
              <template #title>
                <el-icon>
                  <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.name }}</span>
              </template>
              
              <el-menu-item
                v-for="subMenu in menu.children"
                :key="subMenu.path"
                :index="subMenu.path"
              >
                <el-icon>
                  <component :is="subMenu.icon" />
                </el-icon>
                <template #title>{{ subMenu.name }}</template>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </aside>

      <!-- 主内容区 -->
      <main class="main-content">
        <div class="content-wrapper">
          <!-- 面包屑导航 -->
          <div class="breadcrumb-container">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item
                v-for="item in breadcrumbList"
                :key="item.path"
                :to="item.path"
              >
                {{ item.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <!-- 页面内容 -->
          <div class="page-content">
            <router-view />
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { menuData } from '@/api/menu'
import { Expand, Fold, OfficeBuilding } from '@element-plus/icons-vue'
import NotificationList from '@/components/NotificationList.vue'
import ProfileDropdown from '@/components/ProfileDropdown.vue'

export default {
  name: 'MainLayout',
  components: {
    Expand,
    Fold,
    OfficeBuilding,
    NotificationList,
    ProfileDropdown
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const userStore = useUserStore()
    
    const isCollapsed = ref(false)
    const menuList = computed(() => userStore.menuList)
    
    // 当前激活的菜单
    const activeMenu = computed(() => {
      return route.path
    })
    
    // 面包屑导航
    const breadcrumbList = ref([])
    
    // 切换侧边栏
    const toggleSidebar = () => {
      isCollapsed.value = !isCollapsed.value
    }
    
    // 生成面包屑导航
    const generateBreadcrumb = (path) => {
      const breadcrumbs = []
      const pathSegments = path.split('/').filter(segment => segment)
      
      // 查找匹配的菜单项
      const findMenuByPath = (menus, targetPath) => {
        for (const menu of menus) {
          if (menu.path === targetPath) {
            return menu
          }
          if (menu.children) {
            const found = findMenuByPath(menu.children, targetPath)
            if (found) return found
          }
        }
        return null
      }
      
      // 构建面包屑
      let currentPath = ''
      for (const segment of pathSegments) {
        currentPath += '/' + segment
        const menu = findMenuByPath(menuData, currentPath)
        if (menu) {
          breadcrumbs.push({
            name: menu.name,
            path: menu.path
          })
        }
      }
      
      return breadcrumbs
    }
    
    // 监听路由变化，更新面包屑
    watch(
      () => route.path,
      (newPath) => {
        breadcrumbList.value = generateBreadcrumb(newPath)
      },
      { immediate: true }
    )
    
    onMounted(() => {
      // 初始化用户信息
      userStore.initUserInfo()
    })
    
    return {
      isCollapsed,
      menuList,
      activeMenu,
      breadcrumbList,
      toggleSidebar
    }
  }
}
</script>

<style lang="scss" scoped>
.main-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.header {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .header-left {
    .logo {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
      color: #303133;

      .logo-text {
        margin-left: 8px;
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }
}

.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  z-index: 999;

  &.collapsed {
    width: 64px;
  }

  .sidebar-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e4e7ed;

    .collapse-btn {
      border: none;
      background: transparent;
      
      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  .sidebar-menu {
    flex: 1;
    border: none;
    overflow-y: auto;

    :deep(.el-menu-item) {
      height: 50px;
      line-height: 50px;
      
      &:hover {
        background-color: #f0f9ff;
        color: #409eff;
      }
      
      &.is-active {
        background-color: #e6f7ff;
        color: #409eff;
        border-right: 3px solid #409eff;
      }
    }

    :deep(.el-sub-menu) {
      .el-sub-menu__title {
        height: 50px;
        line-height: 50px;
        
        &:hover {
          background-color: #f0f9ff;
          color: #409eff;
        }
      }
    }
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f5f7fa;

  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .breadcrumb-container {
    background: #fff;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
  }

  .page-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;

    &:not(.collapsed) {
      transform: translateX(0);
    }
  }

  .main-content {
    margin-left: 0;
  }
}
</style>
